<template>
    <el-dialog class="car-owner-add" :title="ownerName" :visible.sync="dialogVisible" width="90%" style="height:600px" :before-close="handleClose">
        <el-button type="primary" @click="addNewCar">新增车辆</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="carName" label="车辆名" width="180">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.carName"></el-input>
                    </div>
                    <span v-else>{{scope.row.carName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="plateNumber" label="车牌号">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.plateNumber"></el-input>
                    </div>
                    <span v-else>{{scope.row.plateNumber}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="rfidCardNo" label="RFID标签卡号">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.rfidCardNo"></el-input>
                    </div>
                    <span v-else>{{scope.row.rfidCardNo}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.brand"></el-input>
                    </div>
                    <span v-else>{{scope.row.brand}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="manufacturers" label="厂家">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.manufacturers"></el-input>
                    </div>
                    <span v-else>{{scope.row.manufacturers}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="power" label="功率">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.power"></el-input>
                    </div>
                    <span v-else>{{scope.row.power}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="carVin" label="车架号">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.carVin"></el-input>
                    </div>
                    <span v-else>{{scope.row.carVin}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="topSpeed" label="最大速度">
                <template scope="scope">
                    <div class="input-box" v-if="scope.row.isEdit">
                        <el-input v-model="scope.row.topSpeed"></el-input>
                    </div>
                    <span v-else>{{scope.row.topSpeed}}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="unBind(scope.row)" type="text" size="small" v-show="!scope.row.isEdit">解绑</el-button>
                    <el-button @click="edit(scope.row)" type="text" size="small">{{scope.row.isEdit?'保存':'编辑'}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>


<script>
import * as API from '@/api/business/car'

export default {
    data() {
        return {
            dialogVisible: false,
            tableData: [],
            tableLoading: false,
            ownerName: '',
            baseRow: {},
            ruleForm: {
                carId: '',
                ownerName: '',
                carName: '',
                brand: '',
                photoId: '',
                orgId: '',
                orgName: '',
                ownerId: '',
                delFlag: 0,
                rfidCardNo: '',
                manufacturers: '',
                carVin: '',
                topSpeed: 0,
                power: 0.0,
                plateNumber: '',
                isEdit: false
            },
            rules: {
                ownerId: [{ required: true, message: '请选择车主姓名', trigger: 'blur' }],
                carName: [{ required: true, message: '请输入车辆名', trigger: 'blur' }],
                plateNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
                orgId: [{ required: true, message: '请选择所在小区', trigger: 'blur' }],
                photoId: [{ required: false, message: '请上传照片', trigger: 'blur' }],
                manufacturers: [{ required: false, message: '请输入生产厂家', trigger: 'blur' }],
                carVin: [{ required: false, message: '请输入车架号', trigger: 'blur' }],
                topSpeed: [{ required: false, message: '请输入最大速度', trigger: 'blur' }],
                power: [{ required: false, message: '请输入功率', trigger: 'blur' }],
                rfidCardNo: [{ required: true, message: '请输入RFID标签卡号', trigger: 'blur' }],
                brand: [{ required: false, message: '请输入车辆品牌', trigger: 'blur' }]
            }
        }
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        show(row) {
            this.baseRow = row
            this.ownerName = row.ownerName + '的车辆信息'
            this.dialogVisible = true
            this.tableLoading = true
            this.query()
        },
        query() {
            API.getByOwnerId(this.baseRow.ownerId).then(res => {
                this.tableLoading = false
                if (res.data.code === 0) {
                    res.data.data.forEach(item => {
                        item.isEdit = false
                    })
                    this.tableData = res.data.data
                }
            })
        },
        addNewCar() {
            this.ruleForm.isEdit = true
            this.tableData.push(this.ruleForm)
        },
        edit(row) {
            if (!row.isEdit) {
                row.isEdit = !row.isEdit
            } else {
                if (row.carId) {
                    API.edit(row).then(res => {
                        if (res.data.code === 0) {
                            this.$message.success('车辆信息修改成功!')
                            this.handleClose()
                            this.$emit('table-search')
                        }
                    })
                } else {
                    let obj = this.tableData[this.tableData.length - 1]
                    obj.orgId = this.baseRow.orgId
                    obj.orgName = this.baseRow.orgName
                    obj.ownerId = this.baseRow.ownerId
                    obj.ownerName = this.baseRow.ownerName
                    obj.carId = ''
                    let flag = false
                    Object.keys(this.rules).forEach(key => {
                        if (this.rules[key][0].required && !obj[key]) {
                            flag = true
                            this.$message.warning(this.rules[key][0].message)
                        }
                    })
                    if (!flag) {
                        API.save(obj).then(res => {
                            if (res.data.code === 0) {
                                this.$message.success('新增车辆信息成功!')
                                this.query()
                            }
                        })
                    }
                }
            }
        },
        unBind(row) {
            this.$confirm('是否解绑当前车辆数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                API.deleteById(row.carId).then(res => {
                    if (res.data.code === 0) {
                        this.$message.success('解绑成功')
                        this.query()
                    }
                })
            })
        }
    }
}
</script>